<script setup lang="ts">
import BasicLayout from '@/layout/BasicLayout.vue'
import AiChatComponent from '@/components/ai/AiChatComponent.vue'
import { RobotOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import { useChatIdStore } from '@/stores/useChatIdStore.ts'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'

const open = ref<boolean>(false)

const chatIdStore = useChatIdStore()
const chatId = ref<string>('')
const showDrawer = () => {
  const cacheChatId = chatIdStore.getChatId()
  if (cacheChatId === null) {
    chatIdStore.setChatId(chatIdStore.getRandomChatId())
  }
  chatId.value = chatIdStore.getChatId()
  open.value = true
}

const loginUserStore = useLoginUserStore()
loginUserStore.fetchLoginUser()
</script>

<template>
  <div id="app">
    <BasicLayout />
    <a-float-button
      type="primary"
      :style="{
        right: '24px',
      }"
      @click="showDrawer"
    >
      <template #icon>
        <RobotOutlined />
      </template>
    </a-float-button>
    <a-drawer
      v-model:open="open"
      class="custom-class"
      root-class-name="root-class-name"
      width="520"
      :root-style="{ color: 'blue' }"
      style="color: black"
      title="农业小组手"
      placement="right"
    >
      <div>
        <AiChatComponent :chatId="chatId" />
      </div>
    </a-drawer>
  </div>
</template>

<style scoped>
/* 全局样式中添加 */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 针对 ECharts 容器的优化 */
.v-chart-container,
.echarts-container {
  backface-visibility: hidden;
  transform: translateZ(0); /* 触发 GPU 加速渲染 */
}
</style>
